<!-- 小店数据 -->

<template>
	<shop-page :style="{ '--color': vuex_config.themeColor1 }" ref="user_view">
		<view class="u-flex" slot="shop-top">
			<view class="source-description" @click="description">
				<u-icon name="e72c" custom-prefix="iconfont" color="#ffffff" size="30"></u-icon>
				<text class="source-title">来源说明</text>
			</view>
			<image :src="vuex_user.headimgurl" class="user-image"></image>
			<view class="user-info">
				<view class="user-name">{{ vuex_user.store_name ? vuex_user.store_name : '暂未设置小店名称' }}</view>
			</view>
		</view>

		<view class="shop-bottom" slot="shop-bottom">
			<view class="set-function" @click="jump">
				<view class="set-function-item">
					<u-icon name="e696" size="33" color="#000" custom-prefix="iconfont"></u-icon>
					<view class="function-name">小店名称设置</view>
				</view>
				<u-icon name="e775" size="33" color="#ccc" custom-prefix="iconfont"></u-icon>
			</view>

			<view class="classification">
				<view :class="{ 'classification-css': true, 'classification-color': actIndex == -1 ? false : true }" class="ficat-pe" @click="catClick(-1)">全部</view>
				<view
					:class="{ 'classification-css': true, 'classification-color': actIndex == index ? false : true }"
					class="ficat-pe"
					@click="catClick(index)"
					v-for="(item, index) in catList"
					:key="item.pk_id"
				>
					<view class="">{{ item.name }}</view>
					<u-icon name="e725" custom-prefix="iconfont" :custom-style="custIcon" @click="delCat(item.pk_id)"></u-icon>
				</view>
				<view class="classification-css newClass " @click="newAdd">新增分类+</view>
			</view>
			<view class="store-data">
				<view class="store-item" v-for="(item, index) in dataList" :key="index" @click="jumpImg(item.pk_id)">
					<view class="store-image"><image :src="$formatImg(item.logo)"></image></view>
					<view class="u-line-2 store-title">{{ item.product_name || item.name }}</view>
					<view class="store-money">
						<view class="money-info">
							<text class="money-title">￥{{ item.price | priceFmt }}</text>
						</view>
					</view>
				</view>
			</view>
			<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
			<!-- 弹窗 -->
			<u-popup v-model="show" mode="center" width="600" border-radius="20" @close="cancel">
				<view class="new-category">
					<view class="new-category-title">新增分类</view>
					<view class="new-category-item">
						<view class="new-cat-title">分类名称</view>
						<input class="new-cet-ipt" v-model="newValue" type="text" value="" placeholder-class="pla-cet" placeholder="分类名称" />
					</view>

					<view class="new-category-item">
						<view class="">排序</view>
						<u-number-box :min="1" v-model="numberValue"></u-number-box>
					</view>
					<view class="new-category-item  new-cat-ite">
						<view class="confirm cancel" @click="cancel">取消</view>
						<view class="confirm" @click="confirm">确认</view>
					</view>
				</view>
			</u-popup>

			<u-popup v-model="classShow" mode="bottom" border-radius="30" height="40%">
				<view class="class-type">
					<view class="class-type-item" hover-class="type-hover">设置分类</view>
					<view class="class-type-item" v-for="(item, index) in catList" :key="index" hover-class="type-hover" @click="setCat(item.pk_id)">{{ item.name }}</view>
					<view class="" style="width: 100%;height: 110rpx;background-color: #ffffff;"></view>
					<view class="cel" hover-class="type-hover" @click="jumpImg">取消</view>
				</view>
			</u-popup>
		</view>
	</shop-page>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import shopPage from '../components/shopPage/index';
import { uniLinkTo, uniModal, uniToast } from '@/utils/uniPromise.js';
import { mapState } from 'vuex';
export default {
	components: {
		'shop-page':shopPage
	},
	mixins: [pagingMixin],
	data() {
		return {
			custIcon: {
				fontSize: '30rpx',
				marginLeft: '10rpx'
				// position: 'absolute',
				// top:0,
				// right:0
			},
			dataList_pk_id: '', //点击当前图片的pk_id
			classShow: false, //显示||隐藏分类设置弹出框
			className: '', //新增分类名称
			newValue: '', //设置新增分类值
			catList: [], //分类列表
			dataList: [], //内容数据列表
			actIndex: -1, //判断分类下标
			show: false, //显示||隐藏添加分类弹窗
			numberValue: 1 //分类排序值
		};
	},
	computed: {
		...mapState(['vuex_user'])
	},
	filters: {
		// 金币格式化
		priceFmt: function(price) {
			if (price) {
				price = parseFloat(price);
				var intPrice = parseInt(price);
				if (price - intPrice > 0) {
					return price.toFixed(2);
				} else {
					return intPrice;
				}
			} else {
				return 0;
			}
		}
	},
	onLoad: function() {
		// 列表内容
		this.$initpage();
		this.setcatList();
	},
	onShow () {
		this.$nextTick(function(){
			this.$refs.user_view.$show()
		})
	},
	onReachBottom: function() {
		this.loadMore();
	},
	methods: {
		$initpage() {
			let params = {};
			if (this.actIndex > -1) {
				params.type = this.catList[this.actIndex].pk_id;
			}
			this._init_data('GetUsersFavouriteList', params, { callBack: this.$formatData });
		},
		// 获取分类列表
		setcatList() {
			this.$loading();
			this.$resPost('GetFavouriteClass', { page_size: 100 }).then(({ data }) => {
				this.catList = data;
				this.$hide();
			});
		},

		// 跳转到小店名称设置
		jump() {
			uniLinkTo('/package/user/my-shop/shop-name/index');
		},
		loadMore() {
			this._load_data({
				callBack: this.$formatData
			});
		},
		// 处理数据
		$formatData(list) {
			return list.map((item) => {
				if (item.product_img) {
					item.logo = item.product_img.split(',')[0];
				}
				return item;
			});
		},
		// 来源说明
		description() {
			uniModal({
				content: '我的小店”为好物推荐官集中展示商品的分销区。店内默认展示产品为商家上架的所有产品，当好物推荐官收藏某个商品后，小店将只展示好物推荐官收藏的所有商品。',
				title: '来源说明',
				showCancel: false,
				confirmText: '我知道了',
				confirmColor: '#999999'
			});
		},

		// 设置分类
		setCat(id) {
			this.$resPost('UpdateUsersFavouriteClass', {
				pk_id: this.dataList_pk_id,
				type: id ? id : -1
			}).then(() => {
				uniToast({
					title: '设置成功',
					duration: 500
				});
				this.jumpImg();
			});
		},
		// 点击分类
		catClick(index) {
			if (this.actIndex === index) {
				return;
			}
			this.actIndex = index;
			this.$initpage();
		},
		// 弹出新增分类窗口
		newAdd() {
			this.show = true;
		},
		// 取消新增分类
		cancel() {
			this.show = false;
			this.newValue = '';
		},
		// 确认新增分类
		confirm() {
			if(!this.newValue)return this.$toast('分类名称不能为空')
			this.$resPost('AddFavouriteClass', {
				name: this.newValue,
				sort: this.numberValue
			}).then(({ data }) => {
				this.cancel();
				this.setcatList();
			});
		},

		// 点击内容图片,打开分类修改弹窗
		jumpImg(id) {
			if (id) {
				this.dataList_pk_id = id;
			}
			this.classShow = !this.classShow;
		},
		// 删除分类
		delCat(id) {
			uniModal({
				content: '是否删除分类'
			}).then(res => {
				this.$resPost('DelFavouriteClass', {
					pk_id: id
				}).then(({ data }) => {
					if (data) {
						uniToast({
							title: '删除成功',
							duration: 500
						});
						this.setcatList();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.shop-top {
	position: relative;
	display: flex;
	height: 400rpx;
	background-color: var(--color);
	padding-top: 100rpx;
	padding-left: 30rpx;
}

.source-description {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}

.source-title {
	display: inline-block;
	margin-left: 10rpx;
	font-size: 30rpx;
	color: #ffffff;
}

.ficat-pe {
	display: flex;
	align-items: center;
}

.class-type {
	// padding: 0 20rpx;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	position: relative;
	background-color: #f5f5f5;
}

.class-type-item {
	padding: 0 20rpx;
	background-color: #ffffff;
	line-height: 100rpx;
	height: 100rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.type-hover {
	background-color: #f5f5f5;
}

.cel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	line-height: 110rpx;
	height: 110rpx;
	background-color: #ffffff;
	border-top: 10rpx solid #f5f5f5;
}

.new-cat-ite {
	text-align: center;
	.confirm {
		height: 100%;
		font-size: 40rpx;
		color: #333;
		line-height: 100rpx;
		flex: 1;
		overflow: hidden;
		&.cancel {
			border-right: 1rpx solid #f5f5f5;
		}
	}
}

.new-cet-ipt {
	text-align: right;
}

.pla-cet {
	font-size: 28rpx;
}

.new-category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.new-category-item:nth-last-child(1) {
	border: 0;
}

.new-cat-title {
	color: #666666;
}

.new-category {
	display: flex;
	flex-direction: column;
	padding: 30rpx 30rpx 0;
}

.new-category-title {
	text-align: center;
	font-weight: 700;
	font-size: 35rpx;
	padding: 20rpx 0;
}

.user-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 30rpx;
}

.user-info {
	color: #fff;
	margin-top: 20rpx;
}

.user-name {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 5rpx;
}

.user-shop {
	font-size: 24rpx;
}

.shop-bottom {
	padding: 60rpx 30rpx 0;
}

.set-function {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60rpx;
}

.set-function-item {
	display: flex;
	align-items: center;
}

.function-name {
	color: #333333;
	font-size: 32rpx;
	font-weight: 500;
	margin-left: 26rpx;
}

.store-image {
	width: 330rpx;
	height: 250rpx;
	margin-bottom: 10rpx;
}

.store-title {
	width: 330rpx;
	color: #333;
	font-size: 30rpx;
	padding: 0rpx 20rpx;
	text-align: left;
	font-size: 30rpx;
}

.money-info {
	display: flex;
	align-items: center;
}

.money-title {
	display: inline-block;
	color: $sww-theme-price;
	font-size: 36rpx;
	margin-right: 10rpx;
	margin-top: 10rpx;
}

.store-money {
	padding: 0 20rpx;
}

.money-go {
	font-size: 20rpx;
	color: #b9b9b9;
}

.recurrence {
	text-align: center;
	line-height: 26rpx;
	width: 90rpx;
	padding: 5rpx 10rpx;
	height: 36rpx;
	background-color: var(--color);
	border-radius: 18rpx;
	margin-left: 10rpx;
	color: #fff;
	font-size: 24rpx;
}

.store-data {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.store-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 20rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 0 10rpx 5rpx #f5f5f5;
}

.classification {
	display: flex;
	flex-wrap: wrap;
	margin: 40rpx 0;
}

.classification-css {
	padding: 5rpx 30rpx;
	background-color: var(--color);
	font-size: 26rpx;
	border: 1rpx solid var(--color);
	margin-right: 20rpx;
	color: #ffffff;
	border-radius: 7rpx;
	margin-bottom: 20rpx;
}

.classification-color {
	color: var(--color);
	border: 1rpx solid var(--color);
	background-color: #ffffff;
}

.newClass {
	border: 1rpx solid var(--color);
	background-color: #ffffff;
	color: var(--color);
}
</style>
